<script setup lang="ts">
  import { computed } from 'vue';
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { useForm } from '@/hooks/arco/useForm';
  import { queryInstInfrastructure } from '@/api/organization/nursing-home';
  import { editMedstPosition } from '@/api/device-management/device';

  const props = withDefaults(
    defineProps<{
      data: any;
    }>(),
    {}
  );

  const emit = defineEmits(['edit']);

  const descData = computed(() => {
    const { data } = props;
    return [
      {
        label: '所在院区',
        value: data.branchName,
      },
      {
        label: '所在建筑',
        value: data.buildingName,
      },
      {
        label: '所在楼层',
        value: data.floorNumber,
      },
      {
        label: '详细位置',
        value: data.location,
      },
      {
        label: '管理编号',
        value: data.aliasName,
      },
    ];
  });

  const modalForm = useForm({
    state: {
      branchId: '',
      buildingId: '',
      floorNum: 1,
      location: '',
      aliasName: '',
    },
  });

  const branchSelect = useSelectOption({
    leader: true,
    immediate: false,
    name: '所在院区',
    apiFun: queryInstInfrastructure,
    transformDataFun(data) {
      return data.branches;
    },
    fieldNames: {
      label: 'branchName',
      value: 'branchId',
      extra: 'buildings',
    },
    getValue() {
      return modalForm.state.branchId;
    },
    enhanceExtraData: true,
  });

  const buildingSelect = useSelectOption({
    immediate: false,
    name: '所在建筑',
    getValue() {
      return modalForm.state.buildingId;
    },
    apiFun: (id, extra) => {
      return Promise.resolve(extra || []);
    },
    enhanceExtraData: true,
    fieldNames: {
      label: 'buildingName',
      value: 'buildingId',
      extra: 'floors',
    },
    onChange(e) {
      // floorOptions.value = extra;
      // floorSelect.retry();
      modalForm.state.buildingId = e;
    },
    upstream: branchSelect,
  });

  const floorSelect = useSelectOption({
    upstream: buildingSelect,
    immediate: false,
    name: '所在楼层',
    apiFun: (e, extra) => {
      return Promise.resolve(extra || []);
    },
    fieldNames: {
      label: 'floorName',
      value: 'floorId',
      extra: 'rooms',
    },
    onChange(e) {
      modalForm.state.floorNum = e;
    },
    getValue() {
      return modalForm.state.floorNum;
    },
  });

  const editModal = useModeModalBinder({
    modes: ['edit'],
    renderTitle() {
      return '编辑布放信息';
    },
    onShow() {
      modalForm.setFieldsValue(props.data);
      branchSelect.retry();
    },
    async onOkClick() {
      await modalForm.validate();
      return editMedstPosition(modalForm.state).then(() => {
        emit('edit');
      });
    },
  });
</script>

<template>
  <div class="col h-full">
    <a-descriptions size="large" :data="descData" :column="1" />
    <ae-button
      class="absolute right-2 bottom-2"
      purpose="edit"
      @click="editModal.showModal('edit')"
      >编辑
    </ae-button>
    <a-modal v-bind="editModal.bindProps" width="700px">
      <a-form v-bind="modalForm.bindProps">
        <a-form-item field="branchId" label="所在院区">
          <a-select
            v-model="modalForm.state.branchId"
            v-bind="branchSelect.bindProps"
            :style="{ width: '100%' }"
          />
        </a-form-item>
        <a-form-item field="buildingId" label="所在建筑">
          <a-select
            v-model="modalForm.state.buildingId"
            v-bind="buildingSelect.bindProps"
            :style="{ width: '100%' }"
          />
        </a-form-item>

        <a-form-item field="floorNum" label="所在楼层">
          <a-select
            v-model="modalForm.state.floorNum"
            v-bind="floorSelect.bindProps"
            :style="{ width: '100%' }"
          />
        </a-form-item>

        <a-form-item field="address" label="详细位置">
          <a-input
            v-model="modalForm.state.location"
            placeholder="请输入设备布放的详细位置"
          />
        </a-form-item>

        <a-form-item field="number" label="管理编号">
          <a-input
            v-model="modalForm.state.aliasName"
            placeholder="请输入管理编号"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped></style>
